<template>
	<view class="container">

		<view class="content">
			<view class="header">
				<text>{{ projectInfo.title }}</text>
				<text>{{ projectInfo.startTime + ' - ' + projectInfo.endTime }}</text>
				<text style="margin-top: 10rpx">当前标准时间：{{ timeFilter() }}</text>
			</view>
			<view class="other">
				<view class="title">
					<text>项目介绍:</text>
				</view>
				<view :v-html="projectInfo.content"></view>
			</view>
			<view class="list">
				<view class="tabs">
					<view class="dyh">
						<text>品名</text>
						<text>规格</text>
						<text>单位</text>
						<text>数量</text>
						<text>限价</text>
					</view>

					<!-- <text>竞标价格</text> -->
				</view>
				<view class="item" v-for="(item, index) in projectInfo.details" :key="index">
					<view class="dyh">
						<text>{{ item.name }}</text>
						<text>{{ item.spec }}</text>
						<text>{{ item.brand }}</text>
						<text>{{ item.num }}</text>

						<text>{{ item.price == 0 ? '无' : item.price }}</text>
					</view>
					<view class="deh">

						<!-- @input="inputChange(item, index)" -->
						<u-input class="inp_k_cd" :data-index="index" fontSize="26rpx" placeholder="产地"
							border="surround" v-model="item.producer"></u-input>

						<u-input class="inp_k_pricw" type="digit" :data-index="index" @input="inputChange(item, index)"
							fontSize="26rpx" placeholder="￥" border="surround" v-model="item.money"></u-input>
					</view>
					<!-- {{item.price.length}} -->
					<!-- :maxlength="item.price.length>1?item.price.length+3:9" -->

				</view>
			</view>
			<view class="price">
				<!-- <textarea class="chadi" v-model='val' placeholder="产地"></textarea> -->
				<!-- <text></text> -->
			</view>
			<view class="price">
				<text>总价：{{ allPrice }}</text>
			</view>
			<view class="submit">
				<u-button color="#0065FF" :loading="loading" @click="submit" text="竞标"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				allPrice: 0,
				loading: false,
				projectInfo: {},
				countDown: 0,
				timeNow: null,
				timer: null,
				val: null
			};
		},
		onLoad(e) {
			console.log(e)
			this.id = e.id;
			this.getInfo();
		},
		onPullDownRefresh() {
			clearInterval(this.timer);
			this.getInfo();
		},
		filters: {
			statusFilter(e) {
				const info = {
					0: '距离开标还有：',
					1: '距离结束：',
					2: '已结束'
				};
				return info[e];
			},

		},
		methods: {
			timeFilter(e) {
				console.log('eeeeee')
				return uni.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss');
			},
			getInfo(e) {
				console.log(this.id)
				this.$api.getProjectInfo({
					id: this.id
				}).then((response) => {
					this.projectInfo = response.data;
					this.projectInfo.details.map((el) => {
						el.money = '';
						el.producer = ''
						return el;
					});
					uni.stopPullDownRefresh();
					this.timeNow = Date.now()
				})
			},
			getTime() {
				const starTime = Date.parse(this.projectInfo.startTime);
				const endTime = Date.parse(this.projectInfo.endTime);
				console.log(starTime)
				if (starTime > this.timeNow) {
					uni.$u.toast('竞标尚未未开始');
					return false;
				}
				if (this.timeNow > endTime) {
					uni.$u.toast('竞标已结束');
					return false;
				}
				if (this.timeNow < endTime && this.timeNow > starTime) {
					return true;
				}
			},

			inputChange(e, i) {
				// console.log(e.money)

				this.projectInfo.details[i] = e
				let price = 0;
				var res = this.projectInfo.details[i]
				if (Number(res.price) != 0 && Number(e.money) > Number(res.price)) {
					// e.money = res.price
					// this.projectInfo.details[i].money = res.price
					// this.$forceUpdate()
				}
				// console.log(e)
				this.allPrice = this.projectInfo.details.forEach((el) => {
					var money = el.money
					// console.log(el)
					if (Number(el.price) != 0 && Number(el.money) > Number(el.price)) {
						// money = el.price
					}
					price += Number(money) * Number(el.num);
				});
				this.allPrice = price.toFixed(2);
			},
			async submit() {
				const flag = this.getTime();
				if (!flag) return;
				for (var i = 0; i < this.projectInfo.details.length; i++) {
					if (!this.projectInfo.details[i].money) {
						uni.$u.toast(`请填写${this.projectInfo.details[i].name}竞标价格`);
						return;
					}
					if (!uni.$u.test.number(this.projectInfo.details[i].money) || this.projectInfo.details[i].money <
						0) {
						uni.$u.toast(`${this.projectInfo.details[i].name}竞标价格填写不正确`);
						return;
					}
					if (this.projectInfo.details[i].price != 0 && Number(this.projectInfo.details[i].money) > Number(
							this
							.projectInfo.details[i].price)) {
						uni.$u.toast(`${this.projectInfo.details[i].name}竞标价格不得超过最高报价`);
						return;
					}
				}
				var data = {
					projectId: this.projectInfo.id,
					params: {
						details: this.projectInfo.details
					}
				}
				// uni.$u.toast('竞标成功');
				// return
				this.loading = true;
				this.$api.addProject(data).then((response) => {
					this.loading = false;
					if (response.code == 200) {
						uni.$u.toast('竞标成功');
						setTimeout(function() {
							uni.navigateBack();
						}, 1000);
					} else {
						uni.$u.toast(response.msg);
					}

				})
				// const {
				// 	code,
				// 	data,
				// 	msg
				// } = await this.$api.projectLogAdd({
				// 	project_id: this.projectInfo.id,
				// 	detail: JSON.stringify(this.projectInfo.detail)
				// });
				// this.loading = false;
				// if (code == 200) {

				// } else {
				// 	uni.$u.toast(msg);
				// }
			}
		}
	};
</script>

<style lang="scss" scoped>
	.chadi {
		border-radius: 20rpx;
		border: 1rpx solid #cacaca;
		padding: 20rpx;
		width: 100%;
		height: 70rpx;
	}

	.content {
		padding-bottom: 140rpx;

		.header {
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			font-size: 26rpx;
			color: #666;

			>text:first-of-type {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}

			.count_down {
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				color: #0065ff;

				/deep/ .u-count-down__text {
					color: #0065ff;
				}
			}
		}

		.deh {
			display: flex;
			margin-top: 10rpx;


			/deep/ .u-input {
				flex: auto !important;
			}

			/deep/ .u-input:nth-child(1) {
				width: 68%;
			}

			/deep/ .u-input:nth-child(2) {
				margin: 0 0 0 auto;
				width: 30%;
			}
		}

		.dyh {
			display: flex;
			align-items: center;
			font-size: 26rpx;

			>text:nth-of-type(1) {
				width: 30%;
				text-align: center;
			}

			>text:nth-of-type(2) {
				width: 25%;
				text-align: center;
			}

			>text:nth-of-type(3) {
				width: 15%;
				text-align: center;
			}

			>text:nth-of-type(4) {
				width: 15%;
				text-align: center;
			}

			>text:nth-of-type(5) {
				width: 15%;
				text-align: center;
			}

			// >text:nth-of-type(6) {
			// 	width: 15%;
			// 	text-align: center;
			// }

			/deep/ .u-input {
				height: 30rpx;
			}
		}

		.list {
			padding: 20rpx;
			color: #333;
			background-color: #fff;

			.tabs {
				// display: flex;
				font-size: 24rpx;
				font-weight: bold;
				margin-bottom: 20rpx;


			}

			.item {

				padding: 20rpx 0;
				border-bottom: 1rpx dotted #ddd;




			}
		}

		.other {
			padding: 20rpx;

			.title {
				margin-bottom: 20rpx;
				font-size: 28rpx;
			}
		}

		.price {
			font-size: 28rpx;
			padding: 20rpx;
			display: flex;
			justify-content: flex-end;
		}

		.submit {
			position: fixed;
			bottom: 0;
			width: 100%;
			padding: 20rpx 20rpx 40rpx 20rpx;
			box-sizing: border-box;
			background-color: #fff;

			/deep/ .u-button {
				border-radius: 20rpx;
			}
		}
	}
</style>